<template>
  <div id="writed" v-if="is_show_page">
    <div class="_3PLTX">
      <div class="_2Mx1k">
        <div class="_3CoyQ">
          <router-link :to="`/article/${article_id}`" class="_2-ZiM">{{article_title}}</router-link>
          <br>
          <router-link :to="`/article/${article_id}`" class="_2ajaT">发布成功，点击查看文章</router-link>
        </div>
        <ul class="zelSB">
          <li class="_35P4c"><i class="fa fa-weibo"></i>微博</li>
          <li class="_1c1Eo"><i class="fa fa-wechat"></i>微信</li>
          <li class="_1HWk1"><i class="fa fa-link"></i>复制链接</li>
          <li class="_3FrjS _3Qjz6 _2_WAp _2po2r cRfUr" title="">
            <span class="">更多分享</span>
          </li>
        </ul>
      </div>
      <div class="_3Q2EW" @click="$router.back()">×</div>
      <div class="_1s967"></div>
      <div class="_2w_E5">
        <div class="_23R_O">
          <div class="_1WCUC">
            <i class="fa fa-search fa-2x"></i><input type="text" placeholder="搜索专题">
          </div>
          <div class="_3dZoJ">向专题投稿，让文章被更多人发现</div>
        </div>
        <div>
          <div class="_18jMg">
            <h3>我管理的专题<a href="">新建</a></h3>
            <ul class="_1hEmG">
              <li class="_3GDE6" v-for="specil,key in my_special_list">
                <a v-if="special.post_status">已收录</a>
                <a v-else @click="post_article(special.id,key)">收录</a>
                <img alt="png" :src="specil.image">
                <span class="_1CN24" >{{specil.name}}}</span>
              </li>
            </ul>
          </div>
          <div class="_18jMg">
            <h3>最近投稿</h3>
            <ul class="_1hEmG">
              <li class="_3GDE6">
                <a data-collection-id="83" data-post-text="投稿" data-posting-text="投稿中" data-posted-text="等待审核">投稿</a>
                <img alt="png" src="https://upload.jianshu.io/collections/images/83/1.jpg">
                <span class="_1CN24" title="摄影">摄影</span>
              </li>
              <li class="_3GDE6">
                <a data-collection-id="83" data-post-text="投稿" data-posting-text="投稿中" data-posted-text="等待审核">投稿</a>
                <img alt="png" src="https://upload.jianshu.io/collections/images/83/1.jpg">
                <span class="_1CN24" title="摄影">摄影</span>
              </li>
              <li class="_3GDE6">
                <a data-collection-id="83" data-post-text="投稿" data-posting-text="投稿中" data-posted-text="等待审核">投稿</a>
                <img alt="png" src="https://upload.jianshu.io/collections/images/83/1.jpg">
                <span class="_1CN24" title="摄影">摄影</span>
              </li>
            </ul>
          </div>
          <div class="_18jMg">
            <h3>推荐专题</h3>
            <div>
              <ul class="_1hEmG">
                <li class="_3GDE6">
                  <img alt="png" src="https://upload.jianshu.io/collections/images/83/1.jpg">
                  <span class="_1CN24">摄影<em>154.8K篇文章，2575.1K人关注</em></span>
                  <a data-collection-id="83" data-post-text="投稿" data-posting-text="投稿中" data-posted-text="等待审核">投稿</a>
                </li>
                <li class="_3GDE6">
                  <img alt="png" src="https://upload.jianshu.io/collections/images/95/1.jpg">
                  <span class="_1CN24">故事<em>192.2K篇文章，1920.7K人关注</em></span>
                  <a data-collection-id="95" data-post-text="投稿" data-posting-text="投稿中" data-posted-text="等待审核">投稿</a>
                </li>
                <li class="_3GDE6">
                  <img alt="png" src="https://upload.jianshu.io/collections/images/83/1.jpg">
                  <span class="_1CN24">摄影<em>154.8K篇文章，2575.1K人关注</em></span>
                  <a data-collection-id="83" data-post-text="投稿" data-posting-text="投稿中" data-posted-text="等待审核">投稿</a>
                </li>
                <li class="_3GDE6">
                  <img alt="png" src="https://upload.jianshu.io/collections/images/95/1.jpg">
                  <span class="_1CN24">故事<em>192.2K篇文章，1920.7K人关注</em></span>
                  <a data-collection-id="95" data-post-text="投稿" data-posting-text="投稿中" data-posted-text="等待审核">投稿</a>
                </li>
              </ul>
              <div class="_27pBl">没有更多了</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "PostArticle",
        data() {
            return {
                my_special_list: [],
                token: "",
                is_show_page: false,
                article_id:0,
                article_title: "",
            }
        },
        created() {
            this.get_article()
            this.get_token()
            this.get_my_special_list()

        },
        methods: {
            get_token() {
                let vmtoken = localStorage.user_token || sessionStorage.user_token

                if (vmtoken) {
                    this.is_show_page = true
                    this.token = vmtoken
                } else {
                    this.$confirm('是否登陆后继续操作', '别急吧瞎点', {
                        confirmButtonText: '去登陆',
                        cancelButtonText: '返回首页',
                        type: 'info'
                    }).then(() => {
                        // 前往个人中心
                        this.$router.push("/login");
                    }).catch(() => {
                        // 返回站点首页
                        this.$router.push("/");
                    });
                }
            },
            get_my_special_list() {
                this.$axios.get(`${this.$settings.Host}/article/special/`, {
                    params:{
                    article_id:this.article_id
                },
                    headers:{
                        Authorization:"jwt "+this.token
                    }
                }).then(response=>{
                this.my_special_list = response.data;
                console.log(this.article_id)
            }).catch(error=>{
                console.log(error.response);
                if(error.response.status==401){
                    this.$router.push("/login");
                }else{
                    this.$message.error("网络异常，无法获取专题列表！");
                }
            })
            },
            get_article(){
                this.article_id = localStorage.article_id
                this.article_title = localStorage.article_title
            },
            get_article_status(specil_id,key){
                this.$axios.post(`${this.$settings.Host}/article/post/`,{
                    article_id : this.article_id,
                    specil_id : specil_id
                },{headers:{Authorization:'jwt '+this.token}}).then(response=>{
                    this.my_special_list[key].post_status = true
                    console.log(response.data)
                }).catch(error=>{
                    this.$message.error(response.data.detail)
                })
            },

        }
    }
</script>

<style scoped>
  ::selection {
    color: #fff;
    background: #1890ff;
  }

  .writed {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
  }

  .writed * {
    box-sizing: border-box;
  }

  ._3PLTX {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1010;
    overflow-y: auto;
  }

  ._3PLTX ._2Mx1k {
    background-color: #f2f2f2;
    padding-bottom: 110px;
  }

  ._3PLTX ._2Mx1k ._3CoyQ {
    padding: 80px 0 40px;
    text-align: center;
  }

  ._3PLTX ._2Mx1k ._3CoyQ ._2-ZiM {
    display: inline-block;
    height: 40px;
    font-size: 28px;
    font-weight: 500;
    color: #333;
    margin-bottom: 24px;
  }

  ._3PLTX ._2Mx1k ._3CoyQ ._2ajaT {
    font-size: 16px;
    font-weight: 600;
    color: #42c02e;
  }

  ._3PLTX ._2Mx1k ._3CoyQ ._2ajaT:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 10px;
    border: 3px solid #42c02e;
    border-width: 0 0 4px 4px;
    transform: rotate(-45deg);
    transition: 0s;
    position: relative;
    bottom: 4px;
    right: 8px;
  }

  ._3PLTX ._2Mx1k .zelSB {
    text-align: center;
    color: #fff;
    font-size: 14px;
  }

  ._3PLTX ._2Mx1k .zelSB > li {
    display: inline-block;
    width: 124px;
    line-height: 38px;
    border-radius: 100px;
    margin: 0 15px;
    cursor: pointer;
    padding: 0;
    text-align: center;
  }

  ._3PLTX ._2Mx1k .zelSB li._35P4c {
    background-color: #e05244;
  }

  ._3PLTX ._2Mx1k .zelSB > li i {
    margin-right: 5px;
  }

  ._3PLTX ._2Mx1k .zelSB li._1c1Eo {
    background-color: #07b225;
  }

  ._3PLTX ._2Mx1k .zelSB li._1HWk1 {
    background-color: #3194d0;
  }

  ._2po2r {
    padding: 10px 20px;
    line-height: 20px;
    white-space: nowrap;
    text-align: left;
    position: relative;
    border-bottom: 1px solid #d9d9d9;
  }

  .cRfUr {
    border-bottom: 1px solid #d9d9d9;
  }

  ._2po2r:last-child {
    border-radius: 0 0 4px 4px;
    border-bottom: 0;
  }

  ._3PLTX ._2Mx1k .zelSB > li {
    display: inline-block;
    width: 124px;
    line-height: 38px;
    border-radius: 100px;
    margin: 0 15px;
    cursor: pointer;
    padding: 0;
    text-align: center;
  }

  ._3PLTX ._2Mx1k .zelSB li._3Qjz6 {
    background-color: #a7a7a7;
    position: relative;
  }

  ._3PLTX ._3Q2EW {
    position: fixed;
    top: 50px;
    right: 100px;
    font-size: 30px;
    font-weight: 700;
    padding: 5px;
    cursor: pointer;
  }

  ._3PLTX ._1s967 {
    height: 40px;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background-color: #fff;
    margin-top: -40px;
  }

  ._3PLTX ._2w_E5 {
    margin: 40px auto 0;
    width: 700px;
    font-size: 14px;
  }

  ._3PLTX ._2w_E5 ._23R_O {
    margin-bottom: 36px;
  }

  ._3PLTX ._2w_E5 ._23R_O ._1WCUC {
    float: right;
    border: 1px solid #d9d9d9;
    position: relative;
    width: 200px;
    height: 34px;
    border-radius: 17px;
    padding: 5px 20px 5px 30px;
  }

  ._3PLTX ._2w_E5 ._23R_O ._1WCUC i {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -8px;
    font-size: 16px;
    color: #ccc;
  }

  ._3PLTX ._2w_E5 ._23R_O ._1WCUC input {
    line-height: 24px;
    height: 24px;
    width: 100%;
    font-size: 14px;
    background-color: transparent;
  }

  ._3PLTX ._2w_E5 ._23R_O ._3dZoJ {
    font-size: 16px;
    font-weight: 500;
    line-height: 38px;
  }

  ._3PLTX ._2w_E5 ._18jMg {
    position: relative;
    margin-bottom: 50px;
  }

  ._3PLTX ._2w_E5 ._18jMg h3 {
    margin-bottom: 0;
    height: 40px;
    line-height: 40px;
    padding: 0 6px 0 14px;
    background-color: #f2f2f2;
    font-size: 14px;
  }

  ._3PLTX ._2w_E5 a {
    color: #42c02e;
  }

  ._3PLTX ._2w_E5 ._18jMg h3 a {
    margin-left: 15px;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG {
    position: relative;
    margin: 1px 0 0 1px;
    zoom: 1;
    min-height: 72px;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG:after, ._3PLTX ._2w_E5 ._18jMg ._1hEmG:before {
    content: " ";
    display: table;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG li {
    float: left;
    width: 234px;
    border: 1px solid #f2f2f2;
    position: relative;
    margin: -1px 0 0 -1px;
    list-style-type: none;
  }

  ._3PLTX ._2w_E5 a {
    color: #42c02e;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG li a {
    position: absolute;
    top: 24px;
    right: 15px;
  }

  img {
    vertical-align: middle;
    border-style: none;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG li img {
    position: absolute;
    left: 15px;
    height: 40px;
    width: 40px;
    top: 15px;
    border-radius: 10%;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG li ._1CN24 {
    display: block;
    font-weight: 700;
    color: #595959;
    width: 100%;
    padding: 0 60px 0 75px;
    line-height: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ._3PLTX ._2w_E5 ._23R_O ._1WCUC input {
    line-height: 24px;
    height: 24px;
    width: 100%;
    font-size: 14px;
    background-color: transparent;
    outline: none;
    border: 0;
  }

  ._3PLTX ._2w_E5 ._23R_O ._1WCUC i {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -8px;
    font-size: 16px;
    color: #ccc;
  }

  ._3PLTX ._2w_E5 ._23R_O ._1WCUC {
    float: right;
    border: 1px solid #d9d9d9;
    position: relative;
    width: 200px;
    height: 34px;
    border-radius: 17px;
    padding: 5px 20px 5px 30px;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG ._3GDE6 {
    width: 49.85666666%;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG li img {
    position: absolute;
    left: 15px;
    height: 40px;
    width: 40px;
    top: 15px;
    border-radius: 10%;
  }

  img {
    vertical-align: middle;
    border-style: none;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG li ._1CN24 {
    display: block;
    font-weight: 700;
    color: #595959;
    width: 100%;
    padding: 0 60px 0 75px;
    line-height: 70px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ._1hEmG a {
    cursor: pointer;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG ._3GDE6 ._1CN24 {
    display: block;
    padding: 18px 65px 16px;
    line-height: 1;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG ._3GDE6 ._1CN24 em {
    font-weight: 400;
    font-style: normal;
    color: #999;
    display: block;
    margin-top: 8px;
    font-size: 12px;
  }

  ._3PLTX ._2w_E5 a {
    color: #42c02e;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG li a {
    position: absolute;
    top: 24px;
    right: 15px;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

  ._3PLTX ._27pBl {
    padding: 30px 0;
    text-align: center;
  }

  ._3PLTX ._2w_E5 ._18jMg ._1hEmG ._3GDE6 ._1CN24 {
    display: block;
    padding: 18px 65px 16px;
    line-height: 1;
  }
</style>
